<script>
	import Modal from "@/components/Modal.vue"
	import addressPicker from "@/components/address-picker.vue"
	
	export default {
		components: {
			Modal,addressPicker
		},
		data() {
			return {
				area_code:'',
				city:'全国',
				page: 1,
				nomore: false,
				title: 'Hello',
				member_id: 0,
				list: [],
				name: '',
				label_id: 0,
				titleTop: 0,
				statusBarHeight: 0,
				labelData: {},
				refresherTriggered: false,
				info:{},
				modalShow:false,
				rule_url:'',
				is_gz_gzh:0,
				is_gz_show:true,
				is_scene:'',
				is_gz_text:''
			}
		},
		onShareAppMessage() {
			if(uni.getStorageSync('info')){
				this.info = uni.getStorageSync('info')
				return {
					title: '发布消息找到那个他/她',
					path: '/pages/index/index?id='+this.info.me_invite_code,
					imageUrl: "https://seekerxcxoss.yiyankeji.vip/Label/Share_img.png"
				}
			}else{
				return {
					title: '发布消息找到那个他/她',
					path: '/pages/index/index',
					imageUrl: "https://seekerxcxoss.yiyankeji.vip/Label/Share_img.png"
				}
			}
		},
		onLoad(options) {
			var that = this;
			console.log(options);
			
			var invitecode = '';
			
			if(options.id){
				invitecode = options.id
			}else{
				if(options.scene){
					var str = decodeURIComponent(options.scene)
					if(str){
						var arr = str.split('=')
						invitecode = arr[1]
					}
				}
			}
			console.log(invitecode);
			
			
			

			// uni.setStorageSync("member_id","1")
			// uni.setStorageSync("member_token","12ae2208aa60131667b5f3ce13214253d15988")




			// 获取胶囊按钮位置信息
			try {
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				const {
					top,
					height
				} = menuButtonInfo;
				console.log(top, height);

				const query = uni.createSelectorQuery()
				query.select("#search").boundingClientRect(rect => {
					const searchHeight = rect.height
					this.titleTop = top - ((searchHeight - height) / 2);
				}).exec()

			} catch (error) {
				this.titleTop = 0;
			}





			if (uni.getStorageSync('member_id')) {
				this.member_id = uni.getStorageSync('member_id')
			}
			this.index(0)

			this.getLabel()


			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					//	打印临时凭证
					console.log(loginRes.code)
					uni.request({
						url: getApp().globalData.host + '/api/Login/registerOrLogin',
						data: {
							wxcode: loginRes.code,
							invitecode: invitecode
						},
						header: {},
						success: (r) => {
							console.log(r.data.data)
							uni.setStorageSync('member_id', r.data.data.memberid)
							uni.setStorageSync('member_token', r.data.data.membertoken)

							that.getLabel()
							that.getGzinfo()
							that.getIsFx()
							that.queryGZH()
							
							uni.request({
								url: getApp().globalData.host + '/api/My/getMyInfo',
								header: {
									memberid: uni.getStorageSync('member_id'),
									membertoken: uni.getStorageSync('member_token'),
								},
								success: (rr) => {
									if(rr.data.code==800){
										that.modalShow = true
									}
									uni.setStorageSync('info', rr.data.data)
									that.info = rr.data.data
								},
							})

							uni.request({
								url: getApp().globalData.host + '/api/Fund/getFundInfo',
								header: {
									memberid: uni.getStorageSync('member_id'),
									membertoken: uni.getStorageSync('member_token'),
								},
								success: (rrr) => {
									uni.setStorageSync('getFundInfo', rrr.data.data)
								},
							})





						},
					})


				}
			});

		},
		onShow() {
			var that = this
			
			uni.$on('data', function(data) {
				that.city = data.city
			})
			
			that.label_id = 0
			that.nomore = false;
			that.index(0)
			
			uni.request({
				url: getApp().globalData.host + '/api/My/getMyInfo',
				header: {
					memberid: uni.getStorageSync('member_id'),
					membertoken: uni.getStorageSync('member_token'),
				},
				success: (rr) => {
					uni.setStorageSync('info', rr.data.data)
					if(rr.data.code==800){
						that.modalShow = true
					}
					that.info = rr.data.data
				},
			})
			
			uni.request({
				url: getApp().globalData.host + '/api/Fund/getFundInfo',
				header: {
					memberid: uni.getStorageSync('member_id'),
					membertoken: uni.getStorageSync('member_token'),
				},
				success: (rrr) => {
					uni.setStorageSync('getFundInfo', rrr.data.data)
				},
			})
			
			if (uni.getStorageSync('member_id')) {
				that.member_id = uni.getStorageSync('member_id')
				that.lists_count()
			}
			
			
			
			
			
		},
		onReachBottom() {

		},
		onPullDownRefresh() {
			this.label_id = 0
			this.onShow();
		},
		methods: {
			queryGZH(){
				var that = this
				uni.request({
					url: getApp().globalData.host + '/api/My/getOfficialFollow',
					header: {
						memberid: uni.getStorageSync('member_id'),
						membertoken: uni.getStorageSync('member_token'),
					},
					success: (r) => {
						that.is_gz_gzh = r.data.data.is_gz_gzh
						console.log(that.is_gz_gzh)
						that.is_gz_text = r.data.data.word
					},
				})
			},
			getGzinfo(){
				var that = this
				uni.request({
					url: getApp().globalData.host + '/api/My/getGzinfo',
					header: {
						memberid: uni.getStorageSync('member_id'),
						membertoken: uni.getStorageSync('member_token'),
					},
					success: (r) => {
						uni.setStorageSync('Gzinfo',r.data.data)
					},
				})
			},
			getIsFx(){
				var that = this
				uni.request({
					url: getApp().globalData.host + '/api/My/getIsFx',
					header: {
						memberid: uni.getStorageSync('member_id'),
						membertoken: uni.getStorageSync('member_token'),
					},
					success: (r) => {
						uni.setStorageSync('getIsFx',r.data.data)
					},
				})
			},
			
			handleAddressChange(e){
				if(e.codes){
					if(e.codes.areaCode!='99'){
						this.area_code = e.codes.areaCode
					}else{ 
						if(e.codes.cityCode!='99'){
							this.area_code = e.codes.cityCode
						}else{
							this.area_code = e.codes.provinceCode
						}
					}
				
				}else{
					this.area_code = ''
				}
				
				this.page = 1
				this.nomore = false;
				this.index(this.label_id)
			},
			lists_count() {
				var that = this
				uni.request({
					url: getApp().globalData.host + '/api/My/getmessagewd',
					data: {
						message_type: 1
					},
					header: {
						memberid: uni.getStorageSync('member_id'),
						membertoken: uni.getStorageSync('member_token'),
					},
					success: (r) => {
						if(r.data.data){
							var count = r.data.data.wd_num
							uni.setTabBarBadge({
								index: 3,
								text: String(count)
							})
						}
					},
				})
			
			},
			webview(){
				uni.navigateTo({
					url:'/pages/webview/webview?url='+this.rule_url
				})
			},
			refresherrefresh() {
				this.getLabel()
				this.refresherTriggered = true;
				this.page = 1;
				this.nomore = false;
				this.index(this.label_id)
			},
			toDown() {
				this.page++;
				this.index(this.label_id)
			},
			go(url, id) {
				uni.navigateTo({
					url: url + '?id=' + id
				})
			},
			nav(i) {
				this.label_id = (i == this.label_id) ? 0 : i
				this.page = 1
				this.name = ''
				this.nomore = false;
				this.index(this.label_id)
			},
			_request() {
				this.index(this.label_id)
			},
			changeBlur(){
				this.page = 1
				this.nomore = false;
				this.index(this.label_id)
			},
			getLabel() {
				var that = this
				uni.request({
					url: getApp().globalData.host + '/api/My/getSelectList',
					data: {

					},
					header: {
						memberid: uni.getStorageSync('member_id'),
						membertoken: uni.getStorageSync('member_token'),
					},
					success: (r) => {
						that.labelData = r.data.data.list
						uni.setStorageSync('labelData',that.labelData)
					},
				})
			},
			index(i) {
				if (this.nomore) return
				var that = this
				uni.request({
					url: getApp().globalData.host + '/api/Index/getIndex',
					data: {
						member_id: that.member_id,
						page: that.page,
						limit: 10,
						label_id: i,
						name: that.name,
						area_code:that.area_code
					},
					header: {},
					success: (r) => {
						if (r.data.data.list.length == 0) {
							that.nomore = true;
						}
						r.data.data.list.forEach(item => {
							item.height = (350 + Math.random() * 200);
						})
						if (that.page == 1) {
							that.list = r.data.data.list
						} else {
							that.list = [...that.list, ...r.data.data.list]
						}
						
						that.rule_url = r.data.data.rule_url
					},
					complete() {
						uni.stopPullDownRefresh()
						that.refresherTriggered = false;
					}
				})
			},
			confirmSubmit(){
				this.modalShow = false
			},
			search_city(){
				uni.navigateTo({
					url:'/pages/index/search'
				})
			},
			bindload(detail) {
			  console.log(detail, "加载成功");
			  this.is_scene = detail.detail.errMsg
			},
			binderror(detail) {
			  console.log(detail, "加载失败");
			},
			is_gz_panduan(){
				this.is_gz_show = false
			}
		}
	}
</script>
<template>
	<div class="index-container p-31 overflow-hidden h-full">
		<image src="/static/index/bg-index.png" mode="widthFix" style="position: absolute;top: 0;left:0;width: 100%">
		</image>

		<Modal v-if="modalShow" :confirmText="'确认'" :showCancel="true" @confirm="confirmSubmit" @cancel="()=>{
			modalShow=false
		}">
			<view style="padding: 20px;">抱歉，您的账号被封禁，请联系客服</view>
		</Modal>

		<div class="flex relative z-10" :style="{ 'position': 'absolute', 'top': titleTop + 'px' }" style="z-index: 100;">
			<image src="/static/index/title-3.png" mode="widthFix" class="w-160" style="padding-top: 7rpx;"></image>
			<!--<view @click="search_city" style="margin-left: 5rpx;">{{city}}</view>
			 -->
			
			<addressPicker 
			  @addressChange="handleAddressChange" 
			  placeholder="全国"
			/>
		</div>
		
		<div class="flex relative z-10" :style="{ 'position': 'absolute', 'top': titleTop + 40 + 'px' }" style="z-index: 100;width: 100%;">
			<div id="search" class="flex bg-white h-70 px-32 py-18 rounded-50" style="width: 93%;position: relative;">
				<image src="/static/index/search.png" mode="widthFix" class="w-30"></image>
				<input type="text" class="ml-10 flex-1 h-full fz26" placeholder="支持关键词精准搜索" v-model="name"
					confirm-type="search" @confirm="_request" @blur="changeBlur" />
					<view @click="changeBlur" style="width: 20%;height: 100%; position: absolute;top: 0%;left: 80%;text-align: center;line-height: 66rpx;color: #fff;z-index: 99999;" class="s_bg">搜索</view>
			</div>
		</div>
		
		
		<div class="h-full relative z-10" :style="{ paddingTop: titleTop - 10 + 'px' }" style="margin-top: 85rpx;">
			<scroll-view scroll-y="true" :refresher-triggered="refresherTriggered" @refresherrefresh="refresherrefresh"
				:refresher-enabled="true" @scrolltolower="toDown" class="h-full">

				<div class="flex flex-wrap between">
					<div class="w-165 h-105 mb-12 pl-10 pt-10 text-white fz28 relative overflow-hidden"
						@click="nav(item.label_id)" v-for="(item,index) in labelData" :key="index"
						:style="'background-image:url('+item.index_label_logo+')'" style="background-size: 100% 100%;">
						{{item.label_name}}
						<image :src="item.index_x_label_logo" v-if="label_id==item.label_id" mode="widthFix"
							class="absolute w-full h-full l-0 t-0" style="display: flexbox;"></image>
					</div>
				</div>

				
				<div @click="webview" class="banner_textscroll" style="width: 100%;background-color: #fff; margin-top: 0rpx; margin-bottom: 15rpx;
				 color: #161616;font-size: 26rpx; height: 60rpx; line-height: 60rpx;">
					<div>{{is_gz_text}}</div>
				</div>


				<div style="display: flex;justify-content: space-between;align-items: center;width: 100%;position: relative;">
					<image src="/static/index/title-2.png" mode="widthFix" class="w-130 mt-15 mb-24"></image>

					<image @click="webview" src="/static/qiu.png" mode="widthFix" class="w-130 mt-15 mb-24" style="position: absolute;left: 83%;top: -30rpx;z-index: 99;"></image>
				</div>
				
				
				<div class="grid" v-if="list.length != 0">
					<div>
						<template v-for="(item, key) in list" v-if="key%2==0">
							<div class="item" :key="key" :style="'height:'+item.height+'rpx'"
								@click="go('/pages/detail/detail', item.seek_id)">
								<image v-if="item.seek_img_arr.length != 0" :src="item.seek_img_arr[0]"
									class="w-full h-full rounded-16" mode="aspectFill">
								</image>

								<!-- <image :src="item.index_bj_url" mode="widthFix" class="w-100 tag" style="height: 22px;"></image> -->
								<!-- <view class="w-100 tag1" :style="{ 'background': item.index_bj_url }"
									style="font-size: 10px;color: #fff;width: 150px;height: 22px;">{{ item.label_name }}
									{{ item.index_bj_url }}
								</view> -->

								<div class="tag1 text-white px-20 py-10 font-bold fz24"
									:style="{ 'background-image': 'url(' + item.index_bj_url + ')' }">
									{{ item.label_name }}
								</div>

								<div class="info px-20">
									<div class="fz26 flex text-white">{{ item.seek_name }}
										<div class="age ml-10 bg-pink-2 px-10"
											style="border-radius: 0 15rpx 15rpx 15rpx;">
											{{ item.seek_age }}
										</div>
									</div>
									<div class="fz20 text-white mt-6 mb-10">{{ item.seek_content }}</div>
									<div class="between">
										<div class="bg-primary flex text-white px-15 py-5 rounded-50 flex-shirnk-0">
											<image src="/static/index/tag/more.png" mode="widthFix" class="w-20">
											</image>
											<div class="fz16 ml-10">查看更多</div>
										</div>
										<div class="fz20 text-white">领茶水费：{{ item.seek_money }}</div>
									</div>
								</div>

							</div>
						</template>
					</div>
					<div>
						<template v-for="(item, key) in list" v-if="key%2==1">
							<div class="item" :key="key" :style="'height:'+item.height+'rpx'"
								@click="go('/pages/detail/detail', item.seek_id)">

								<image v-if="item.seek_img_arr.length != 0" :src="item.seek_img_arr[0]"
									class="w-full h-full rounded-16" mode="aspectFill">
								</image>

								<!-- <image :src="item.index_bj_url" mode="widthFix" class="w-100 tag" style="height: 22px;"></image> -->
								<!-- <view class="w-100 tag1" :style="{ 'background': item.index_bj_url }"
									style="font-size: 10px;color: #fff;width: 150px;height: 22px;">{{ item.label_name }}
									{{ item.index_bj_url }}
								</view> -->

								<div class="tag1 text-white px-20 py-10 font-bold fz24"
									:style="{ 'background-image': 'url(' + item.index_bj_url + ')' }">
									{{ item.label_name }}
								</div>

								<div class="info px-20">
									<div class="fz26 flex text-white">{{ item.seek_name }}
										<div class="age ml-10 bg-pink-2 px-10"
											style="border-radius: 0 15rpx 15rpx 15rpx;">
											{{ item.seek_age }}
										</div>
									</div>
									<div class="fz20 text-white mt-6 mb-10">{{ item.seek_content }}</div>
									<div class="between">
										<div class="bg-primary flex text-white px-15 py-5 rounded-50 flex-shirnk-0">
											<image src="/static/index/tag/more.png" mode="widthFix" class="w-20">
											</image>
											<div class="fz16 ml-10">查看更多</div>
										</div>
										<div class="fz20 text-white">领茶水费：{{ item.seek_money }}</div>
									</div>
								</div>

							</div>
						</template>
					</div>
				</div>
				<div class="center text-gray-a4 fz24 mt-50">没有更多了</div>
				<div style="height: 200rpx;"></div>
				
				<nomore v-if="list.length == 0"></nomore>
			</scroll-view>
		</div>
		
		<!-- <div v-show="is_gz_show==true" style="height: 250rpx;bottom:10rpx ; z-index: 99999; width: 96%; left: 2%; position: fixed;">
			<block v-if="is_gz_show==true">
				<view @click="is_gz_panduan" v-if="is_scene=='加载成功'" style="position: absolute;left: 93%;width: 10%;top: 0rpx;text-align: center;font-size: 36rpx;">X</view>
				<div style="background-color: #999;color: #fff;font-size: 20rpx;padding: 5px;" v-if="is_scene=='加载成功'">{{is_gz_text}}</div>
				<div><official-account @load="bindload" @error="binderror"></official-account></div>
			</block>
		</div> -->
	</div>
</template>



<style lang="less">
	.s_bg{
		background: url('../../static/s_bg.png') no-repeat; background-size: 100% 100%;
	}
	.maskc {
		background-color: rgba(0, 0, 0, 0.3);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 18rpx;
	}

	.grid {
		display: flex;
		gap: 15rpx;
		justify-content: space-between;

		.item {
			break-inside: avoid;
			width: 340rpx;
			height: 440rpx;
			border-radius: 16rpx;
			position: relative;
			overflow: hidden;
			margin-bottom: 14rpx;

			.tag {
				position: absolute;
				top: 0;
				left: 0;
			}

			.tag1 {
				position: absolute;
				top: 0;
				left: 0;
				background-size: 100% 100%;
			}

			.info {
				position: absolute;
				bottom: 0rpx;
				padding-bottom: 20rpx;
				padding-top: 50rpx;
				left: 0;
				width: 100%;
				background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 70%);
			}
		}
	}

	page {
		height: 100%;
		overflow: hidden;
	}

	.index-container {
		height: 100%;
		background-repeat: no-repeat;
		background-size: 100% auto;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		padding-top: var(--status-bar-height);
		margin-top: 50rpx;
	}
	
	/* 文字滚动 */
	.banner_textscroll{
		overflow: hidden;
	}
	
	@keyframes scrolltext{
	  0% {
	    transform: translateX(100%);
	  }
	
	  100% {
	    transform: translateX(-100%);
	  }
	}
	
	.banner_textscroll > div{
	  white-space: nowrap;
	  width: 100%;
	  animation: 10s scrolltext linear infinite;
	}

</style>